import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { Row, Col, Button, Radio, Table } from 'antd';
import { WeaSearchGroup, WeaInput, WeaBrowser, WeaCheckbox
  , WeaTableEdit, WeaNewScroll, WeaLocaleProvider } from 'ecCom';
import { WeaTableNew } from 'comsMobx';

const { WeaTable } = WeaTableNew;
const RadioGroup = Radio.Group;
const getLabel = WeaLocaleProvider.getLabel;

@inject('docMoveStore')
@observer
class Moved extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: [
        {
          title: getLabel('19996,17037', '源目录自定义字段'),
          dataIndex: 'src',
        },
        {
          title: getLabel(687, '表现形式'),
          dataIndex: 'srcType',
        },
        {
          title: getLabel(385112, '目标目录自定义字段'),
          dataIndex: 'obj',
        },
        {
          title: getLabel(687, '表现形式'),
          dataIndex: 'objType',
        },
      ],
    };
  }

  componentDidMount() {
    const { docMoveStore } = this.props;
    const { customField } = docMoveStore;
    customField();
  }

  componentWillReceiveProps() {
  }

  componentWillUnmount() {
  }

  render() {
    const { docMoveStore } = this.props;
    const { comsWeaTableStore } = docMoveStore;
    let {
      srcCustoms, objCustoms, show, doShow, srcChange, objChange, add, values, datas, srcRadioChange,
      objRadioChange, del, selectedChange, rowKeys, srcBrowserConditionParam, objBrowserConditionParam,
      srcItems, objItems,
    } = docMoveStore;
    let { srcValue, objValue } = values;
    const { columns } = this.state;
    srcCustoms = toJS(srcCustoms),
    objCustoms = toJS(objCustoms),
    rowKeys = toJS(rowKeys),
    srcBrowserConditionParam = toJS(srcBrowserConditionParam),
    objBrowserConditionParam = toJS(objBrowserConditionParam);
    let rowSelection = {
      onChange: selectedChange,
      selectedRowKeys: rowKeys,
    };
    return (
      <div className="tabContent">
        <div className={show.moveShow ? 'con' : 'move-hide'}>
          <div className="content">
            <div className="content-choose">
              <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@3tc9gp`} title={getLabel(19214, '选择目录')}
                needTrigger={true}
                showGroup={true}
                col={1}
                items={[
                                {
                                  com: <div className="choose-catalogue">
                                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@cuktwk@sourceFloder`}>
                                      <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ltfqd5@sourceFloderTitle`} lg={{ span: 2, offset: 2 }} md={{ span: 3 }} sm={{ span: 3 }} xs={{ span: 3 }}>
                                        <span className="choose-label">{getLabel(19996, '源目录')}</span>
                                      </Col>
                                      <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@j5sdqn@sourceFloder`} lg={{ span: 6 }} md={{ span: 7 }} sm={{ span: 7 }} xs={{ span: 7 }}>
                                        <p className="choose-browser">
                                          <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@68dzxw@sourceFloder`}
                                            {...srcBrowserConditionParam}
                                            isSingle={true}
                                            onChange={srcChange}
                                          />
                                        </p>
                                      </Col>
                                      <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@4iqxrx@targetFloderTitle`} lg={{ span: 2, offset: 2 }} md={{ span: 3 }} sm={{ span: 3 }} xs={{ span: 3 }}>
                                        <div className="choose-label">
                                          <span>{getLabel(385113, '目标目录')}</span>
                                        </div>
                                      </Col>
                                      <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@bet3o0@targetFloder`} lg={{ span: 6 }} md={{ span: 7 }} sm={{ span: 7 }} xs={{ span: 7 }}>
                                        <p className="choose-browser">
                                          <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@e34ue2@targetFloder`}
                                            {...objBrowserConditionParam}
                                            isSingle={true}
                                            onChange={objChange}
                                          />
                                        </p>
                                      </Col>
                                    </Row>
                                  </div>,
                                },
                              ]}
              />
            </div>

            <div className="content-define">
              <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@64ftjn`} title={getLabel(17037, '自定义字段')}
                needTrigger={true}
                showGroup={true}
                col={1}
                items={[
                                {
                                  com: <div className="content-catalogue">
                                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@k88ufu@content-define-SourceFloder`}>
                                      <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@u35t10@content-define-SourceFloder`} lg={{ span: 7, offset: 3 }}
                                        md={{ span: 9, offset: 1 }}
                                        sm={{ span: 9, offset: 1 }}
                                        xs={{ span: 9, offset: 1 }}
                                      >
                                        <div className="define">
                                          <p className="define-top">
                                            <span>{getLabel(19996, '源目录')}</span>
                                          </p>
                                          {srcCustoms.customs.length === 0 || srcItems.length === 0 ?
                                            (
                                              <div className="define-detail">
                                                <em className="icon-coms-blank" />
                                                <span>{getLabel(385111, '该目录下没有自定义字段')}</span>
                                              </div>
                                            ) : (
                                              <div className="define-field">
                                                <RadioGroup ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@hjbgh6@define-field`} value={srcValue}
                                                  onChange={(e) => {
                                                              srcRadioChange(e.target.value);
                                                            }}
                                                >
                                                  {srcItems.map((item, index) => (
                                                      <Radio ecId={`${this && this.props && this.props.ecId || ''}_Radio@6cglng@${item.fieldname}`}
                                                        value={srcItems[index].fieldid}
                                                      >
                                                        <span className="define-label">{item.fieldlabel}</span>
                                                        <p className="define-name">{item.fieldname}</p>
                                                      </Radio>
                                                    ))}
                                                </RadioGroup>
                                              </div>
                                            )}
                                        </div>
                                      </Col>

                                      <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ffrg4b@content-define-targetFloder`} lg={{ span: 7, offset: 3 }}
                                        md={{ span: 9, offset: 1 }}
                                        sm={{ span: 9, offset: 1 }}
                                        xs={{ span: 9, offset: 1 }}
                                      >
                                        <div className="define">
                                          <p className="define-top">
                                            <span>{getLabel(385113, '目标目录')}</span>
                                          </p>
                                          {objCustoms.customs.length === 0 || objItems.length === 0 ?
                                            (
                                              <div className="define-detail">
                                                <em className="icon-coms-blank" />
                                                <span>{getLabel(385111, '该目录下没有自定义字段')}</span>
                                              </div>
                                            ) : (
                                              <div className="define-field">
                                                <RadioGroup ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@yo6e53@define-field`} value={objValue}
                                                  onChange={(e) => {
                                                              objRadioChange(e.target.value);
                                                            }}
                                                >
                                                  {objItems.map((item, index) => (
                                                      <Radio ecId={`${this && this.props && this.props.ecId || ''}_Radio@ab6det@${item.fieldname}`}
                                                        value={objItems[index].fieldid}
                                                      >
                                                        <span className="define-label">{item.fieldlabel}</span>
                                                        <p className="define-name">{item.fieldname}</p>
                                                      </Radio>
                                                    ))}
                                                </RadioGroup>
                                              </div>
                                            )}
                                        </div>
                                      </Col>
                                    </Row>
                                  </div>,
                                },
                              ]}
              />
            </div>

            <div className="content-relation">
              <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@etsog3`} title={getLabel(33254, '自定义字段赋值对应关系')}
                needTrigger={true}
                showGroup={true}
                col={1}
                customComponent={
                                <div className="choose-icon">
                                  <em
                                    className={values.srcValue && values.objValue ? 'icon-coms-Add-to-hot add-to-hot-change' : 'icon-coms-Add-to-hot'}
                                    onClick={() => {
                                      if (values.srcValue && values.objValue) {
                                        add();
                                      }
                                    }}
                                  />
                                  <em
                                    className={rowKeys.length === 0 ? 'icon-coms-form-delete-hot' : 'icon-coms-form-delete-hot form-delete-hot-change'}
                                    onClick={() => {
                                      del();
                                    }}
                                  />
                                </div>
                              }
                items={[
                                {
                                  com: <Table ecId={`${this && this.props && this.props.ecId || ''}_Table@2ujrwg@content-relation`} pagination={false}
                                    rowSelection={rowSelection}
                                    columns={columns}
                                    dataSource={datas}
                                  />,
                                },
                              ]}
              />
            </div>
          </div>
          <div className="footer">
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@7g1vi9`} type="primary"
              onClick={() => {
              doShow();
            }}
            >{getLabel(1402, '下一步')}</Button>
          </div>
        </div>
        <div className={show.docShow ? 'con-load' : 'doc-hide'}>
          <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@77gl8f`} comsWeaTableStore={comsWeaTableStore}
            hasOrder={true}
            needScroll={true}
          />
        </div>
      </div>
    );
  }
}

export default Moved;

